<template>
<div>
  <v-touch v-on:swipeleft="onSwipeLeft"  v-on:swiperight="swiperright" class="pay" >

<!--  -->

    <van-sticky>
      <van-nav-bar
          :title="obj.goods_name"
          left-text="返回"
          right-text="按钮"
          left-arrow
          @click-left="onClickLeft"
      />

    </van-sticky>

<!-- 轮播图   -->
  <van-swipe @change="onChange"   :autoplay="3000" :height="300">
    <div v-for="(item,index) in obj.pics" :key="index" @click="seeImg(index)" >
      <van-swipe-item >
        <img style="width: 100%;height: 100%" :src="item.pics_mid_url" alt="">
      </van-swipe-item>
    </div>
    <template #indicator>
      <div class="custom-indicator">{{current+1}}/{{obj.pics.length}}</div>
    </template>
  </van-swipe>

<!-- 用户 -->
  <div class="userBox">
    <div class="imgBox">
      <img :src="obj.goods_big_logo" alt="">
    </div>
   <div class="maxBox">
     <div class="minBOx">
       <div class="name">{{obj.goods_name}}</div>
       <div class="button">进入Ta的仓库</div>
     </div>
     <div class="text">
       欢迎来看看我的宝贝，喜欢的就联系我吧！
     </div>
   </div>
  </div>


  <div v-html="obj.goods_introduce"></div>


  <van-goods-action safe-area-inset-bottom>
    <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
    <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
    <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
    <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
    />
  </van-goods-action>
</v-touch>
</div>
</template>

<script>
import {ImagePreview } from "vant";
import {getDetail} from "@/api/getfun";
export default {
  name: "details",
  data(){
    return{
      show:false,
      obj:null,
      current:0,
      myIndex:0,
      images:[],
    }
  },
  created() {
    let id=this.$route.query.id;
    let than=this;
    getDetail(id).then(res=>{
      let {message}=res.data
      than.obj=message;
      message.pics.forEach((item,index)=>{
        this.images.push(item.pics_mid_url)
      })
      console.log(message)
    })
  },
  methods:{
    swiperright(){
      this.$router.back();
    },
    onClickIcon() {
      Toast('点击图标');
    },
    onClickButton() {
      Toast('点击按钮');
    },

    onChange(index){
      this.current=index
    },
  seeImg(index){
   ImagePreview({
    images:this.images,
    startPosition:this.current,
  })
},
//收藏
  }
}
</script>

<style scoped lang="scss">
.pay{
  touch-action:pan-y!important;
}
.userBox{
  height:88px;
  padding:16px 0;
  border-bottom:1px silver solid;
  display: flex;
  justify-content:space-evenly;
  .imgBox{
    overflow: hidden;
    border-radius: 50%;
    margin-left:16px;
    height:100%;
    width:88px;
    img{
      height: 100%;
      width: 100%;
      border-radius: 50%;
    }
  }
  .minBOx{
    display:flex;
    justify-content: space-around;
    .name{
      font-weight:600;
      font-size:16px;
      width:150px;
      //margin-right:10px;
      line-height: 32px;
      overflow:hidden; text-overflow:ellipsis;white-space: nowrap;
    }
    .button{
      border-radius: 20px;
      border: 1px sandybrown solid;
      font-size: 14px;
      width: 109px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }


  }
  .maxBox{
    margin-left:6px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    .text{
      font-weight:600;
      font-size: 12px;

    }
  }

}


.my-swipe .van-swipe-item {
  background-color: #39a9ed;
  box-shadow:
      4.5px 4.7px 2.2px rgba(0, 0, 0, 0.005),
      6.9px 7.2px 5.3px rgba(0, 0, 0, 0.011),
      9px 9.4px 10px rgba(0, 0, 0, 0.02),
      11.4px 11.9px 17.9px rgba(0, 0, 0, 0.032),
      15.1px 15.7px 33.4px rgba(0, 0, 0, 0.059),
      25px 26px 80px rgba(0, 0, 0, 0.16)
;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>